<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Kukui Cup : Advanced</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap-override.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="./css/responsive-utilities.less">
<link rel="stylesheet/less" type="text/css" href="./css/makahiki-structure.less">
<link rel="stylesheet/less" type="text/css" href="./global_css/theme.less">

<script src="js/less-1.3.0.min.js" type="text/javascript"></script>
</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">
    <div id="info-bar-wide" class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="span1">
                    <img src="./images/default_avatar.png" />
                </div>
                <div class="span3">
                    <h4>Cam M.</h4>
                    <div id="user-cycle">
                        <div>
                            <ul>
                                <li>Rnd 1: 20 points. #2/2 in Ilima-E.</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>Rnd 1: 20 points. #4/17 overall.</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>Overall: 20 points. #1/2 in Ilima-E.</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>Overall: 20 points. #1/17 overall.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <h4>Mokihana: Lounge A</h4>
                    <div id="team-cycle">
                        <div>
                            <ul>
                                <li>Overall: 570 points. #2 out of 20.</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>Round 1: 88 kWh. #1 out of 20.</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>Round 1: 50 gallons. #7 out of 20.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div id="round-cycle">
                        <div class="span3">
                            <ul>
                                <li><h4>Overall Round</h4></li>
                                <li>Ends in 5 Days, 9 Hours, and 39 Minutes</li>
                            </ul>
                        </div>
                        <div class="span3">
                            <ul>
                                <li><h4>Next Workshop</h4></li>
                                <li>Friday evening @ 5pm.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="span2">
                    <button id="header-feedback" href="javascript:void(0);">Send Feedback</button>
                    <a href="landing.html">Logout</a>
                </div>
            </div>
        </div>
    </div>
    <div id="info-bar-single" class="container-fluid">
        <div class="row-fluid">
            <div class="span12" style="text-align: center">
                <div class="span4">
                    <div id="single-cycle">
                        <div class="span3">
                            <h4>Cam M.</h4>
                            20 points in Round 1</br>#2 out of 2 in Ilima-E
                        </div>
                        <div class="span3">
                            <h4>Cam M.</h4>
                            20 points in Round 1</br>#4 out of 17 overall
                        </div>
                        <div class="span3">
                            <h4>Cam M.</h4>
                            20 points #1 out of 2 in Ilima-E
                        </div>
                        <div class="span3">
                            <h4>Cam M.</h4>
                            20 points #1 out of 17 overall
                        </div>
                        <div class="span3">
                            <h4>Mokihana: Lounge A</h4>
                            570 points #2 out of 20
                        </div>
                        <div class="span3">
                            <h4>Mokihana: Lounge A</h4>
                            88 kWh #1 out of 20
                        </div>
                        <div class="span3">
                            <h4>Mokihana: Lounge A</h4>
                            50 gallons #7 out of 20
                        </div>
                        <div class="span3">
                            <h4>Overall Round</h4>
                            Ends in 5 Days, 9 Hours, and 39 Minutes
                        </div>
                        <div class="span3">
                            <h4>Next Workshop</h4>
                            Friday evening @ 5pm.
                        </div>
                    </div>
                </div>
                <div id="feedback-logout" class="span2">
                    <button id="header-feedback" href="javascript:void(0);">Send Feedback</button>
                    <a href="landing.html">Logout</a>
                </div>
            </div>
        </div>
    </div>
    <p></p>
    <p></p>

    <!-- Navbar
    ================================================== -->
    <div class="navbar container">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span
                    class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                </a>
                <div class="brand">
                    <img src="./images/spacer-54.png" alt="University of Hawaii" />
                    <div class="caption">Kukui Cup/UH</div>
                </div>

                <div class="nav-collapse">
                    <ul class="nav">
                        <!-- Choose the correct active page by adding active to the class list -->
                        <li class="home"><a href="home.html" class="home"><img
                                src="./images/spacer-54.png">Home</a></li>
                        <li class=""><a href="activities.html" class="activities"> <img
                                src="./images/spacer-54.png"> Get Nutz
                        </a></li>
                        <li class=""><a href="energy.html" class="energy"> <img
                                src="./images/spacer-54.png"> Go Low
                        </a></li>
                        <li class=""><a href="water.html" class="water"><img
                                src="./images/spacer-54.png"> Water</a></li>
                        <li class=""><a href="news.html" class="news"> <img
                                src="./images/spacer-54.png"> News
                        </a></li>
                        <li class=""><a href="advanced.html" class="advanced"><img
                                src="./images/spacer-54.png"> Advanced</a></li>
                        <li class=""><a href="prizes.html" class="prizes"> <img
                                src="./images/spacer-54.png"> Prizes
                        </a></li>
                        <li class=""><a href="profile.html" class="profile"> <img
                                src="./images/spacer-54.png"> Profile
                        </a></li>
                        <li class=""><a href="help.html" class="help"> <img
                                src="./images/spacer-54.png"> Help
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Quest box
    ================================================== -->
    <div id="quest-box" class="content container hidden-phone" style="clear: both">
        <div id="quest-header">
            <h3 id="quest-title">Your Quests</h3>
            <a href="http://dasha.ics.hawaii.edu:8200/profile/?ref=nav-button#" style="float: right">
                <img src="./images/icon-help-sm.png" width="20" align="center"
                title="Click to get help about this window"
                onclick="toggleHelp(&#39;widget&#39;, &#39;quests&#39;); return false;">
            </a>
        </div>
        <div class="accordion" id="accordion2">
            <ul id="quest-list">
                <li><div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
                                Get social</a>
                        </div>
                        <div id="collapseOne" class="accordion-body collapse">
                            <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur 
                            adipiscing elit. Duis risus ipsum, cursus id tempus a, vestibulum id 
                            libero. Nullam sagittis metus sit amet metus interdum varius. In hac 
                            habitasse platea dictumst. Fusce placerat sollicitudin arcu eu tempus. 
                            Nullam ac metus non massa pulvinar auctor sit amet eu quam. Etiam 
                            feugiat quam auctor massa vehicula sit amet sollicitudin diam auctor. 
                            Etiam quis augue quam. Pellentesque vitae lorem lorem, id pretium sem.
                            </div>
                        </div>
                    </div></li>
                <li>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
                                Get the Fully Committed badge </a>
                        </div>
                        <div id="collapseTwo" class="accordion-body collapse">
                            <div class="accordion-inner">Morbi ut quam nisl. Curabitur eu neque sed 
                            quam facilisis tincidunt. Nunc ut quam elit. Nam tellus dui, vehicula 
                            quis hendrerit vitae, sollicitudin quis diam. Class aptent taciti 
                            sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
                            Sed tempus laoreet vehicula. Ut pulvinar vehicula pharetra. Phasellus 
                            pulvinar, elit nec fermentum eleifend, leo nisi luctus nibh, eget 
                            pretium nulla justo vel ipsum. Praesent ac massa turpis. Morbi non ante 
                            ligula, vel tempor augue. Nullam orci erat, vulputate nec hendrerit eu, 
                            mollis ac erat.</div>
                        </div>
                    </div>
                </li>
                <li><div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseThree"
                                rel="tooltip" title="first tooltip"> Check lounge energy use </a>
                        </div>
                        <div id="collapseThree" class="accordion-body collapse">
                            <div class="accordion-inner">Morbi tempor, nunc at accumsan laoreet, 
                                ante erat elementum risus, porttitor ullamcorper sapien risus sed 
                                turpis. Ut vulputate turpis eget arcu porta ut imperdiet urna 
                                auctor. Sed ullamcorper, est sit amet ullamcorper auctor, sem justo 
                                cursus erat, id cursus nulla turpis non dui. Nulla id tortor 
                                vestibulum tortor interdum pretium. Praesent lectus lectus, 
                                imperdiet id placerat ut, tempus ac augue. Etiam id quam sit amet 
                                nisi ullamcorper sollicitudin non eget metus. Suspendisse commodo 
                                massa in metus volutpat sagittis. Nulla eget dignissim justo. 
                                Pellentesque habitant morbi tristique senectus et netus et 
                                malesuada fames ac turpis egestas. Nulla vitae elit nunc, quis 
                                condimentum dolor. Nullam lacinia dolor vitae nunc rhoncus 
                                consequat. Proin ut quam orci, dictum ultrices lorem.
                                <p>
                                    <a class="btn" href="#">Or do this</a><a class="btn btn-danger"
                                        href="#">Take this action</a>
                            </div>
                        </div>
                    </div></li>
            </ul>
        </div>

        <!-- <script src="js/countdown.js" type="text/javascript"></script> -->

    </div>
    <!-- Collapsed Quest box
    ================================================== -->
    <div class="horizontalaccordion visible-phone">
        <ul>
            <li>
                <h3>Get social</h3>
                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis risus ipsum, 
                    cursus id tempus a, vestibulum id libero. Nullam sagittis metus sit amet metus 
                    interdum varius. In hac habitasse platea dictumst. Fusce placerat sollicitudin 
                    arcu eu tempus. Nullam ac metus non massa pulvinar auctor sit amet eu quam. 
                    Etiam feugiat quam auctor massa vehicula sit amet sollicitudin diam auctor. 
                    Etiam quis augue quam. Pellentesque vitae lorem lorem, id pretium sem.
                </div>
            </li>
            <li>
                <h3>Get the Fully Committed badge</h3>
                <div>Morbi ut quam nisl. Curabitur eu neque sed quam facilisis tincidunt. Nunc ut 
                    quam elit. Nam tellus dui, vehicula quis hendrerit vitae, sollicitudin quis 
                    diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
                    inceptos himenaeos. Sed tempus laoreet vehicula. Ut pulvinar vehicula pharetra. 
                    Phasellus pulvinar, elit nec fermentum eleifend, leo nisi luctus nibh, eget 
                    pretium nulla justo vel ipsum. Praesent ac massa turpis. Morbi non ante ligula, 
                    vel tempor augue. Nullam orci erat, vulputate nec hendrerit eu, mollis ac erat.
                </div>
            </li>
            <li>
                <h3>Check lounge energy use</h3>
                <div>
                    Morbi tempor, nunc at accumsan laoreet, ante erat elementum risus, porttitor 
                    ullamcorper sapien risus sed turpis. Ut vulputate turpis eget arcu porta ut 
                    imperdiet urna auctor. Sed ullamcorper, est sit amet ullamcorper auctor, sem 
                    justo cursus erat, id cursus nulla turpis non dui. Nulla id tortor vestibulum 
                    tortor interdum pretium. Praesent lectus lectus, imperdiet id placerat ut, 
                    tempus ac augue. Etiam id quam sit amet nisi ullamcorper sollicitudin non eget 
                    metus. Suspendisse commodo massa in metus volutpat sagittis. Nulla eget 
                    dignissim justo. Pellentesque habitant morbi tristique senectus et netus et 
                    malesuada fames ac turpis egestas. Nulla vitae elit nunc, quis condimentum 
                    dolor. Nullam lacinia dolor vitae nunc rhoncus consequat. Proin ut quam orci, 
                    dictum ultrices lorem.
                    <p>
                        <a class="btn" href="#">Or do this</a><a class="btn btn-danger" href="#">Take
                            this action</a>
                </div>
            </li>
        </ul>
    </div>
    <p></p>
    <script type="text/javascript">
      var endDate = new Date("Fri Aug 31 00:00:00 2012");
      var today = new Date();
      // Calculate the number of days in the difference.
      var hourDiff = (endDate - today) / (1000 * 60 * 60);
      if (hourDiff > 24) {
        $("#header-round-countdown").countdown({
          until: endDate,
          tickInterval: 60,
          layout: '(ends in {dn} {dl}, {hn} {hl}, and {mn} {ml})'
        });
      }
      else {
        if (hourDiff < 6) {
          $("#header-round-info").addClass("ending");
        }
        $("#header-round-countdown").countdown({
          until: endDate,
          layout: '(ends in {hn} {hl}, {mn} {ml}, and {sn} {sl})'
        });
      }
    </script>

    </div>

    <p></p>

    <div class="content"></div>


    <!-- javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>

    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>

    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>
    <script src="js/jquery.cycle.all.js"></script>

    <script type="text/javascript">
		$.fn.cycle.defaults.timeout = 6000;
		$(function() {
			$('#user-cycle').cycle({
				fx : 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
				fit : 1
			});
		});

		$(function() {
			$('#team-cycle').cycle({
				fx : 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
				fit : 1
			});
		});

		$(function() {
			$('#round-cycle').cycle({
				fx : 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
				fit : 1
			});
		});

		$(function() {
			$('#single-cycle').cycle({
				fx : 'scrollUp', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
				fit : 1,
				height : 55
			});
		});
	</script>

</body>
</html>